import { ChartPieIcon } from "lucide-react";
import {
  Cell,
  Label,
  Legend,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
} from "recharts";
import { PassedDonutTooltip } from "./chart-tooltip";

interface PassedDonutPayload {
  status: string;
  value: number;
  color: string;
}

const data: PassedDonutPayload[] = [
  { status: "passed", value: 92.05, color: "--chart-1" },
  { status: "failed", value: 0, color: "--chart-2" },
  { status: "skipped", value: 2, color: "--chart-3" },
  { status: "broken", value: 5, color: "--chart-4" },
  { status: "unknown", value: 0.95, color: "--chart-5" },
];

export function PassedAverage() {
  const cells = () =>
    data.map((entry) => (
      <Cell key={entry.status} fill={`var(${entry.color})`} />
    ));
  return (
    <div className="flex h-full flex-col rounded-lg border bg-card text-card-foreground shadow-sm">
      <div className="flex items-center justify-between border-b px-4 py-2">
        <div className="flex items-center gap-2 text-sm">
          <ChartPieIcon className="size-4 text-primary" />
          <span className="font-semibold">Average</span>
        </div>
      </div>
      <div className="h-full p-4">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              dataKey="value"
              nameKey="status"
              cx="50%"
              cy="50%"
              innerRadius="70%"
              outerRadius="90%"
              stroke="none"
            >
              {cells()}
              <Label
                value={`${data[0].value.toLocaleString()} %`}
                position="center"
                style={{
                  fontSize: "16px",
                  fontWeight: "bold",
                  color: "var(--text-card-foreground)",
                }}
              />
            </Pie>
            <Legend
              layout="vertical"
              align="right"
              verticalAlign="middle"
              wrapperStyle={{
                right: 0,
                top: "50%",
                transform: "translateY(-50%)",
                fontSize: "10px",
                textTransform: "uppercase",
              }}
            />
            <Tooltip content={<PassedDonutTooltip />} />
          </PieChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}
